<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<u-navbar bgColor="#0e3a5e" title="管理" :safeAreaInsetTop="true" :placeholder="true" leftIconColor="#0e3a5e"
			:titleStyle="data.titleStyle">
		</u-navbar>
		<!-- #endif -->
		<u-sticky>
			<!-- #ifdef APP-PLUS -->
			<u-navbar bgColor="#0e3a5e" title="管理" :safeAreaInsetTop="true" :placeholder="true" leftIconColor="#0e3a5e"
				:titleStyle="data.titleStyle">
			</u-navbar>
			<!-- #endif -->
			<header-role />
		</u-sticky>
	<view class="mescroll-contend">
			<view class="pdBox">
				<view class="pdBox-flex">
					<view class="grid-box">
						<u--image src="../../static/Slice1.png" width="86rpx" height="86rpx"></u--image>
						<view class="number">
							<h1>{{data.alltotalData.totalOutputValue || '-'}}</h1><span> 万</span>
						</view>
						<view class="name">
							本月总产值
						</view>
					</view>
					<view class="grid-box ml">
						<u--image src="../../static/Slice2.png" width="86rpx" height="86rpx"></u--image>
						<view class="number">
							<h1>{{data.alltotalQuantity.totalQuantity || '-'}}</h1><span> 台</span>
						</view>
						<view class="name">
							本月总台数
						</view>
					</view>
				</view>
				<view class="pdBox-flex">
					<view class="grid-box">
	
						<view class="number">
							<span class="value">{{data.alltotalData.dayOutputValue || '-'}} 万</span>
						</view>
						<view class="name">
							今日产值
						</view>
					</view>
					<view class="grid-box ml">
						<view class="number">
							<span class="value">{{data.alltotalData.dayAddPercent || '-'}} %</span>
						</view>
						<view class="name">
							今日产值增长
						</view>
					</view>
				</view>
				<view class="pdBox-flex">
					<view class="grid-box">
	
						<view class="number">
							<span class="value">{{data.alltotalData.lastMonthDayOutputValue || '-'}} 万</span>
						</view>
						<view class="name">
							上月当天产值
						</view>
					</view>
					<view class="grid-box ml">
						<view class="number">
							<span class="value">{{data.alltotalData.lastMonthDaypercent || '-'}} %</span>
						</view>
						<view class="name">
							同比上月增长
						</view>
					</view>
					<view class="grid-box ml">
						<view class="number">
							<span class="value">{{data.alltotalData.avgDayOutputValue || '-'}} 万</span>
						</view>
						<view class="name">
							平均日产值
						</view>
					</view>
				</view>
	
			</view>
			<view class="pdBox-card">
				<view class="pdBox-tabs">
					<u-tabs :list="data.tabList" @change="changeTabs" :current="data.current" lineWidth="0"
						lineColor="#fff" :activeStyle="{
					             color: '#fff',
					             fontWeight: 'bold',
					             transform: 'scale(1.05)',
								 backgroundColor:'#1C8EFF',
								
					         }" :inactiveStyle="{
					             color: '#606266',
					             transform: 'scale(1)'
					         }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
					</u-tabs>
				</view>
				<view class="pdBox-flex">
					<view class="grid-box">
						<u--image src="../../static/Slice1.png" width="86rpx" height="86rpx"></u--image>
						<view class="number">
							<h1>{{data.currentAlltotalData.totalOutputValue || '-'}}</h1><span> 万</span>
						</view>
						<view class="name">
							本月总产值
						</view>
					</view>
					<view class="grid-box ml">
						<u--image src="../../static/Slice2.png" width="86rpx" height="86rpx"></u--image>
						<view class="number">
							<h1>{{data.currentTotalQuantity.totalQuantity || '-'}}</h1><span> 台</span>
						</view>
						<view class="name">
							本月计划
						</view>
					</view>
				</view>
			</view>
			<view class="pdBox">
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>待上线</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.dsxQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
					<view class="pdBox-flex-pointBox color2 ml">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>待开工</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.dkgQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
					<view class="pdBox-flex-pointBox color3 ml">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>生产中</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.sczQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox color4">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>完工调试</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.wgtsQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
					<view class="pdBox-flex-pointBox color5 ml">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>品管复核</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.pgfhQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
					<view class="pdBox-flex-pointBox  ml">
						<view class="grid-box">
							<view class="name">
								<view class="point"></view>
								<text>发货出厂</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentTotalQuantity.fhccQuantity || '-'}} 台</span>
							</view>
						</view>
					</view>
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box flexCen">
							<view class="name">
								<text>今日产值：</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentAlltotalData.dayOutputValue || '-'}} 万</span>
							</view>
						</view>
					</view>
	
	
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box flexCen">
							<view class="name">
								<text>今日产值增长：</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentAlltotalData.dayAddPercent || '-'}} %</span>
							</view>
						</view>
					</view>
	
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box flexCen">
							<view class="name">
								<text>上月当天产值：</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentAlltotalData.lastMonthDayOutputValue || '-'}} 万</span>
							</view>
						</view>
					</view>
	
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box flexCen">
							<view class="name">
								<text>同比上月增长：</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentAlltotalData.lastMonthDaypercent || '-'}} %</span>
							</view>
						</view>
					</view>
	
				</view>
				<view class="pdBox-flex">
					<view class="pdBox-flex-pointBox">
						<view class="grid-box flexCen">
							<view class="name">
								<text>平均日产值：</text>
							</view>
							<view class="number">
								<span class="value">{{data.currentAlltotalData.avgDayOutputValue || '-'}} 万</span>
							</view>
						</view>
					</view>
	
				</view>
			</view>
			<view class="pdBox">
				<view class="charts">
					<view class="charts-name">
						<view class="charts-name-title">
							<view class="point-box">
								<view class="point">
											
								</view>
							</view>
							<view class="name">
								产值数据
							</view>
						</view>
					<!-- 	<view class="more" @click="godetails('outputValue')">
							更多 <u-icon name="arrow-right"></u-icon>
						</view> -->
					</view>
	
					<view class="charts-selete">
						<view class="charts-years">
							<picker mode="date" :value="data.date" fields="month" @change="bindDateChange">
								<view class="uni-input">{{data.date}}</view>
							</picker>
	
						</view>
						<view class="timeList" v-if="data.timeTypeList.length">
							<u-scroll-list :indicator="false">
								<view class="timeItem" :class="data.oindex==indexo?'ac':''"
									v-for="(itemo, indexo) in data.timeTypeList" :key="indexo"
									@click="changeoidx(indexo)">
									<text>{{itemo.name}}</text>
								</view>
							</u-scroll-list>
						</view>
					</view>
					<view class="chartPosition"  v-if="data.chartDataOList.length">
	
						<block v-for="(itemChart,indexo) in data.chartDataOList" :key="indexo">
							<view class="top chartName">
								<text class="unit">{{itemChart.chartName}}</text>
								<text class="unit">{{itemChart.chartUnit}}</text>
							</view>
							<view class="chart" :style="{'height':'300px'}">
								<qiun-data-charts :canvas-id="`chartO-${itemChart.dataOrgId}`" type="column" :key="'chartDataO'+indexo" :opts="data.opts"
									:chartData="itemChart" @getIndex="getIndexO" :ontouch="true" :disableScroll="false" />
							</view>
						</block>
	
					</view>
				</view>
			</view>
			<view class="pdBox">
				<view class="charts">
					<view class="charts-name">
						<view class="charts-name-title">
							<view class="point-box">
								<view class="point">
											
								</view>
							</view>
							<view class="name">
								质量数据
							</view>
						</view>
					<!-- 	<view class="more" @click="godetails('quantityCount')">
							更多 <u-icon name="arrow-right"></u-icon>
						</view> -->
					</view>
			
					<view class="charts-selete">
						<view class="charts-years">
							<picker mode="date" :value="data.dateq" fields="month" @change="bindDateChangeq">
								<view class="uni-input">{{data.dateq}}</view>
							</picker>
			
						</view>
						<view class="timeList" v-if="data.timeTypeList.length">
							<u-scroll-list :indicator="false">
								<view class="timeItem" :class="data.qindex==indexq?'ac':''"
									v-for="(itemq, indexq) in data.timeTypeList" :key="indexq"
									@click="changeqidx(indexq)">
									<text>{{itemq.name}}</text>
								</view>
							</u-scroll-list>
						</view>
					</view>
					<view class="chartPosition"  v-if="data.chartDataQList.length">
			
						<block v-for="(itemChart,indexq) in data.chartDataQList" :key="indexq">
							<view class="top chartName">
								<text class="unit">{{itemChart.chartName}}</text>
								<text class="unit">{{itemChart.chartUnit}}</text>
							</view>
							<view class="chart" :style="{'height':'300px'}">
								<qiun-data-charts type="column" :key="'chartDataQ'+indexq" :opts="data.opts"
									:chartData="itemChart"  :canvas-id="`chartQ-${itemChart.dataOrgId}`" @getIndex="getIndexQ"   :animation='false' :ontouch="true" :disableScroll="false" />
							</view>
						</block>
			
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>
<script lang="ts" setup>
	import { reactive } from "vue";
	import { onShow, onUnload } from "@dcloudio/uni-app";

	import { proplantotal, dateselect, outputValue,quantityCount } from '@/api/manage/manage.js'

	const data : any = reactive({
		current: 0,
		opts: {
			fontSize:12,
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 10, 0, 15],
			enableScroll: true,
			legend: {},
			xAxis: {
				disableGrid: true,
				scrollShow: true,
				itemCount: 6,
			},

			yAxis: {

			},
			extra: {
				tooltip:{
					showBox:false,
				},
				line: {
					type: "straight",
					width: 5,
					activeType: "hollow"
				},
				column: {
					width: 20,
				}
			}
		},

		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},

		proplantotalData: {},
		tabList: [
			{
				name: '成都',
			},
			{
				name: '长沙',
			},
		],
		alltotalData: {},
		alltotalQuantity: {},
		currentAlltotalData: {},
		currentTotalQuantity: {},
		timeTypeList: [],
		oindex: 0,
		qindex: 0,
		chartDataOList: [],
		chartDataQList: [],
		date: uni.$u.timeFormat(Date.now(), 'yyyy-mm'),
		dateq: uni.$u.timeFormat(Date.now(), 'yyyy-mm'),
		dataKey:'',
		dataOrgId:''

	});
	onShow(() => {
		upCallback()
	});

	//切换产值
	const bindDateChange = (e) => {
		data.date = e.detail.value;
		getoutputValue()
	}
	//切换产值
	const changeoidx = (idx : any) => {
		data.oindex = idx;
		getoutputValue()
	}
	const getIndexO=(e)=>{
		const idx=e.currentIndex.index;
		const categories=e.opts.categories;
		data.dataKey=categories[idx];
		data.dataOrgId=e.id.split('-')[1];
		console.log(data.dataOrgId)
		const time = data.date.split('-')
		const year = time[0];
		const month = time[1];
		const dateType = data.timeTypeList[data.oindex].code;

		const detailsData={
			type:'outputValue',
			year:year,
			month: month,
			dataKey:data.dataKey,
			dateType: dateType,
			dataOrgId:data.dataOrgId
		}
		godetails(detailsData)
	}
	const getIndexQ=(e)=>{
		const idx=e.currentIndex.index;
		const categories=e.opts.categories;
		data.dataKey=categories[idx];
		data.dataOrgId=e.id.split('-')[1];
		const time = data.dateq.split('-')
		const year = time[0];
		const month = time[1];
		const dateType = data.timeTypeList[data.qindex].code;
		const detailsData={
			type:'quantityCount',
			year:year,
			month: month,
			dataKey:data.dataKey,
			dateType: dateType,
			dataOrgId:data.dataOrgId
		}
		godetails(detailsData)
	}
	//切换质量
	const bindDateChangeq = (e) => {
		data.dateq = e.detail.value;
		getquantityCount()
	}
	//切换质量
	const changeqidx = (idx : any) => {
		data.qindex = idx;
		getquantityCount()
	}
	//切换组织
	const changeTabs = (e) => {
		data.current = e.index;
		filterCurrentData()
	}
	//获取日期
	const getdateselect = async () => {
		try {
			const res = await dateselect()
			data.timeTypeList = res.data ||[]
		} catch (e) {
			//TODO handle the exception
		}
	}
	//获取统计数据
	const getproplantotal = async () => {
		try {
			const res = await proplantotal()
			data.proplantotalData = res.data;
			const alltotalData = data.proplantotalData.totalAmount.filter(item => {
				return item.dataOrgId == 100
			})
			data.alltotalData = alltotalData[0] || {};
			const totalQuantity = data.proplantotalData.totalQuantity.filter(item => {
				return item.dataOrgId == 100
			})
			data.alltotalQuantity = totalQuantity[0] || {};
			filterCurrentData()
		} catch (e) {
			//TODO handle the exception
		}
	}
	//筛选统计数据
	const filterCurrentData = () => {
		try {
			let dataOrgId = 100;
			if (data.current == 0) {
				dataOrgId = 101;
			} else if (data.current == 1) {
				dataOrgId = 102;
			}
			const currentAlltotalData = data.proplantotalData.totalAmount.filter(item => {
				return item.dataOrgId == dataOrgId
			})
			data.currentAlltotalData = currentAlltotalData[0] || {};
			const currentTotalQuantity = data.proplantotalData.totalQuantity.filter(item => {
				return item.dataOrgId == dataOrgId
			})
			data.currentTotalQuantity = currentTotalQuantity[0] || {};
		} catch (e) {
			//TODO handle the exception
		}

	}
	//获取产值
	const getoutputValue = async () => {
		try {
			const time = data.date.split('-')
			const year = time[0];
			const month = time[1];
			const dateType = data.timeTypeList[data.oindex].code;
			const params = {
				year: year,
				month: month,
				dateType: dateType
			}
			const res = await outputValue(params)
			data.chartDataOList = res.data ||[];

		} catch (e) {

			//TODO handle the exception
		}
	}
	//获取质量数据
	const getquantityCount = async () => {
		try {
			const time = data.dateq.split('-')
			const year = time[0];
			const month = time[1];
			const dateType = data.timeTypeList[data.qindex].code;
			const params = {
				year: year,
				month: month,
				dateType: dateType
			}
			const res = await quantityCount(params)
			data.chartDataQList = res.data ||[]
				console.log(data.chartDataQList)
		} catch (e) {
	
			//TODO handle the exception
		}
	}
	const upCallback = async () => {
		try {
			await getdateselect();
			getproplantotal();
			getoutputValue();
			getquantityCount();
		} catch (e) {
			//TODO handle the exception
		}
	}
	//详情页
	const godetails=(data:any)=>{
		if(!data.dataKey){
			return;
		}
		uni.navigateTo({
			url: '/pages/manageDetails/manageDetails',
			success: function(res) {
				// #ifndef H5
				uni.$emit('getDetails',data)  
				// #endif
				// #ifdef H5
				setTimeout(() => {
					uni.$emit("getDetails", data);
				}, 500)
				// #endif
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F9;
	}

	::v-deep .stickyBox {
		background-color: #F5F5F9;

		.user {
			box-shadow: 0px 11px 17px 0px #EEEEEE;
			border: 1px solid #EEEEEE;
		}

	}

	.pdBox {

		&-flex {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			&-pointBox {
				display: flex;
				flex: 1;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 0px 11px 17px 0px #EEEEEE;

				.point {
					width: 18rpx;
					height: 18rpx;
					background: #00C290;
					border-radius: 6rpx;
				}

				&.ml {
					margin-left: 26rpx;
				}

				.grid-box {
					box-shadow: none;
					padding: 0;

					.name {
						justify-content: flex-start;

						text {
							padding-left: 20rpx;
						}
					}

					.number {
						justify-content: flex-start;
						padding-left: 40rpx;

					}
				}

				.value {
					color: #00C290
				}

				&.color2 {
					.point {
						background: #FF4A4A;
					}

					.value {
						color: #FF4A4A
					}
				}

				&.color3 {
					.point {
						background: #FF9B00;
					}

					.value {
						color: #FF9B00
					}
				}

				&.color4 {
					.point {
						background: #7C67FF;
					}

					.value {
						color: #7C67FF
					}
				}

				&.color5 {
					.point {
						background: #B8ACFF;
					}

					.value {
						color: #B8ACFF
					}
				}

			}
		}


	}

	.grid-box {
		// width: 100%;
		background-color: #FFFFFF;
		flex: 1;
		box-shadow: 0rpx 5rpx 10rpx 3rpx #EEEEEE;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		padding: 16rpx;

		&.flexCen {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.number {
				padding: 0;

				.value {
					color: #000;
				}
			}
		}

		.u-fade-enter-to {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&.ml {
			margin-left: 20rpx;
		}

		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}

		.number {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding: 10rpx 0;

			h1 {
				font-size: 54rpx;
			}

			span {
				font-size: 32rpx;
			}

			.value {
				font-weight: bold;
			}
		}
	}

	.pdBox-card {
		background-color: #fff;
		padding: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 11px 17px 0px #EEEEEE;

		.pdBox-flex {
			margin: 0;

		}

		.grid-box {
			box-shadow: none;
			border: 1rpx solid #4980FD;
		}
	}

	.pdBox-tabs {
		margin-bottom: 30rpx;
	}

	::v-deep .u-tabs__wrapper__nav {
		// padding: 0 !important;
		border: 1rpx solid #4980FD;

		.u-tabs__wrapper__nav__item {
			padding: 0 !important;

		}

		.u-tabs__wrapper__nav__item__text {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 40rpx;
		}
	}

	.charts {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0px 11px 17px 0px #EEEEEE;

		.charts-name {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding: 20rpx 0;
			&-title{
				display: flex;
				align-items: center;
			}
			.more{
				font-size: 30rpx;
				display: flex;
				align-items: center;
			}
			.name {
				font-weight: bold;
			}

			.point-box {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

				.point {
					width: 16rpx;
					height: 16rpx;
					background: #2776FF;
					border-radius: 50%;

					position: relative;
					z-index: 2;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				&::before {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					content: '';
					z-index: 1;
					width: 40rpx;
					height: 40rpx;
					background: rgba(212, 231, 253, 1);
					border-radius: 50%;
					// margin-right:10rpx;
				}
			}

		}

		.charts-selete {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.charts-years {
				flex: 1;
			}

			.timeList {
				flex: 1;
				display: flex;
				align-items: center;

				// margin-left: 60rpx;
				.u-scroll-list {
					padding-bottom: 0;
				}

				.timeItem {
					padding: 10rpx 34rpx;
					background-color: #F5F8FF;
					color: #969595;
					border-radius: 10rpx;
					margin-right: 20rpx;
					overflow: hidden;

					&.ac {
						background-color: #1C8EFF;
						color: #fff;
					}
				}
			}
		}

		.chartPosition {
			.chartName {
				font-size: 30rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.unit {
				margin-left: 20rpx;
			}
		}

		.chart {
			margin-bottom: 20rpx;
		}
	}

	.charts-years {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>